{% load static %}
<article class="post">
  <h1 class="top-gap-0">{{ post.title }}</h1>
  <ul class="list-inline dot-divider post-meta">
    <li class="list-inline-item text-small text-muted">
      {{ post.created_time|timesince }}前
    </li>
    <li class="list-inline-item text-small text-muted">{{ post.word_count }} 字
    </li>
    <li class="list-inline-item text-small text-muted">
      {{ post.views }} 阅读
    </li>
    <li class="list-inline-item text-small text-muted">
      {{ post.comments.count }} 评论
    </li>
  </ul>
  <div class="top-gap-big post-body">
    {{ post.body|safe }}
    <p class="text-center">
      -- EOF --
    </p>
    <div>
      <button class="btn btn-primary" id="js-reward"><i class="fa fa-jpy"
                                                        aria-hidden="true"></i>
        如果觉得文章对你有帮助，请随意打赏
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </button>
      <div class="flex-left flex-wrap units-gap-big mt-4" style="display: none">
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="{% static 'blog/images/weixinpay.jpg' %}" alt="微信支付收款二维码"
                 style="width: 250px">
            <figcaption class="text-center fs-6 mt-2" style="color: green">微信</figcaption>
          </figure>
        </div>
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="{% static 'blog/images/alipay.jpg' %}" alt="支付宝收款二维码" style="width: 250px">
            <figcaption class="text-center fs-6 mt-2 text-primary">支付宝</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="post-tags">
      <ul class="list-inline">
        {% for tag in post.tags.all %}
          <li class="list-inline-item"><a class="text-small" href="javascript:">{{ tag }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
</article>